<template>
  <div>
    <!--  v-model绑定的值是指这个组件的绑定值，比如input组件，select组件，日期时间选择组件，颜色选择器组件，
      这些组件所绑定的值使用v-model比较合适。其他情况，没有这种语义
      也就是说如果子组件标签使用v-model，那么props接受的value值必须与表单组件相关联，然后this.$emit('input', e.target.value)
      否则就不能用v-model，都没得其他的语法来支持。
-->
    <button @click="handleBtn">点击双向修改</button>
    <p>子组件的name: {{name}}</p>
  </div>
</template>
<script>
export default {
  props:['name'],
  methods: {
    handleBtn () {
      this.$emit('update:name', '李四');
    }
  }
}
</script>
